<!--
*@Author: QWP
*@Description: 应急资源地图
*@Date: 2024-07-11 18:45:11
-->
<template>
  <a-layout class="f-h-100 u-emergency-index-tab ">
    <a-layout-content>
      <a-row class="f-h-100">
        <a-col :span="15" class="f-h-100">
          <ScMap3d @click="mapClick"/>
        </a-col>
        <a-col flex="1" class="f-h-100"
          style="padding: 16px; overflow-x: hidden">
          <a-row :gutter="16">
            <a-col :span="isHaveWarn ? 14 : 0">
              <div style="height: 143px" >
                <NowWarnLevel
                  @back="(value) => isHaveWarn = value"/>
              </div>
            </a-col>
            <a-col flex="1">
              <commonFun :isHaveWarn="isHaveWarn" />
            </a-col>
          </a-row>

          <div class="s-bg-white f-margin-t16"
            style="position: relative; flex: 1; padding: 0 16px;border-radius: 16px; min-height: 300px;">
            <AdjustS class="f-h-100" style="position: absolute; width: calc(100% - 24px)" />
          </div>
          
          <div class="f-margin-t16 f-w-100 s-bg-white"
            style="padding: 0 16px 16px; border-radius: 16px">
            <a-tabs v-model:activeKey="activeKey" 
              class="u-team-card">
              <a-tab-pane key="1" tab="队伍情况" style="padding: 0">
                <u-table :columns="teamCols" 
                  :data="teamtabData" 
                  v-model:pagination="teamPagenation"
                  :loading="teamLoading"
                  :rowSelection="null"
                  :scroll="{ y: '480px' }">
                </u-table>
              </a-tab-pane>
              <a-tab-pane key="2" tab="人员情况" style="padding: 0">
                <u-table :columns="userCols" :data="usertabData"
                  v-model:pagination="userPagenation"
                  :loading="userLoading"
                  :rowSelection="null"
                  :scroll="{ y: '480px' }">
                </u-table>
              </a-tab-pane>
              <a-tab-pane key="3" tab="装备情况" style="padding: 0">
                <u-table :columns="equipCols" :data="equiptabData"
                  v-model:pagination="equiPagenation"
                  :loading="equiLoading"
                  :rowSelection="null"
                  :scroll="{ y: '480px' }">
                </u-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"
    :checkType="checkType"
    :title="checkType == '1' ? '队伍详情' : '装备详情'" />
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import sc from './data/510000_sc.json'
import { TableColumnProps, Button } from 'ant-design-vue'
import { ProjectOutlined  } from '@ant-design/icons-vue';
import { urlFile, numberC  } from '@/util/common';
import { useTableScroll } from "@/hooks/useTable";
import Edit from '@/views/oa/emergency/resource/Edit.vue'
import AdjustS from '@/views/index/component/adjust/Index.vue'
import commonFun from './component/commonFun/Index.vue'
import dayjs from "dayjs";
import ScMap3d from '@/views/oa/emergency/resource/map3d/ScMapGlThree.vue'
import NowWarnLevel from '@/views/index/index/components/NowWarnLevel/Index.vue'
import * as resourceApi from "@/service/resource";

onMounted(() => {
  getTeamData()
  getUserData()
  getEquiData()
})

let showEdit = ref<boolean>(false);
let checkType = ref<string>('')

const isHaveWarn = ref<boolean>(false)
const activeKey = ref<string>('1')

// 队伍情况
const teamLoading = ref<boolean>(false)
let teamPagenation = reactive({ total: 0, current: 1, pageSize: 50, showTotal: total => `共 ${total} 条`});
const teamtabData = ref<Array<any>>([])
const teamCols = reactive<Array<TableColumnProps>>([
  { title: '队伍名称', dataIndex: 'teamName', width: 150, },
  { title: '建队时间', dataIndex: 'setupTime', width: 150, 
    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD')
  },
  { title: '队伍性质', dataIndex: 'teamType', width: 150, },
  { title: '队伍人数', dataIndex: 'teamNum', width: 150, },
  { title: '队长', dataIndex: 'leaderName', width: 100, },
])

// 获取队伍数据
const getTeamData = async (fkRegionId?: string) => {
  try {
    const form = {
      size: teamPagenation.pageSize,
      ...teamPagenation,
      model: {
        mapsGridType: 1,
        fkRegionId
      },
    }
    teamLoading.value = true;
    const res = await resourceApi.getMaps(form)
    if(res.code == 0) {
      teamtabData.value = res.data.tableList.records
      teamPagenation.total = numberC(res.data.tableList.total)
    }
  }
  catch(e) {}
  teamLoading.value = false;
}

// 人员情况
const userLoading = ref<boolean>(false)
let userPagenation = reactive({ total: 0, current: 1, pageSize: 50, showTotal: total => `共 ${total} 条`});
const usertabData = ref<Array<any>>([])
const userCols = reactive<Array<TableColumnProps>>([
  { title: '姓名', dataIndex: 'userName', width: 150, },
  { title: '年龄', dataIndex: 'userAge', width: 150, },
  { title: '擅长专业', dataIndex: 'beGoodAt', width: 150, },
  { title: '专/兼', dataIndex: 'partOrFull', width: 150, },
  { title: '从业时间', dataIndex: 'workingTime', width: 100, },
])

// 获取数据
// type map 查询区域队伍人员信息     team: 查询队伍的人员数据
const getUserData = async (value?: string, type?: string) => {
  try {
    const form = {
      size: userPagenation.pageSize,
      ...userPagenation,
      model: {
        mapsGridType: 2,
        fkRegionId: type == 'map' ? value : '',
        teamName: type == 'team' ? value : '',
      },
    }
    userLoading.value = true;
    const res = await resourceApi.getMaps(form)
    if(res.code == 0) {
      usertabData.value = res.data.tableList.records
      userPagenation.total = numberC(res.data.tableList.total)
    }
  }
  catch(e) {}
  userLoading.value = false;
}

// 装备情况
const equiLoading = ref<boolean>(false)
let equiPagenation = reactive({ total: 0, current: 1, pageSize: 50,showTotal: total => `共 ${total} 条` });
const equiptabData = ref<Array<any>>([])
const equipCols = reactive<Array<TableColumnProps>>([
  { title: '装备类别', dataIndex: 'equipmentType', width: 150, },
  { title: '装备名称', dataIndex: 'equipmentName', width: 150, },
  { title: '品牌型号', dataIndex: 'equipmentBrand', width: 150, },
  { title: '关键参数', dataIndex: 'd', width: 150, },
])

// 获取数据
// type map 查询区域队伍人员信息     team: 查询队伍的人员数据
const getEquiData = async (value?: string, type?: string) => {
  try {
    const form = {
      size: equiPagenation.pageSize,
      ...equiPagenation,
      model: {
        mapsGridType: 3,
        fkRegionId: type == 'map' ? value : '',
        teamName: type == 'team' ? value : '',
      },
    }
    equiLoading.value = true;
    const res = await resourceApi.getMaps(form)
    if(res.code == 0) {
      equiptabData.value = res.data.tableList.records
      equiPagenation.total = numberC(res.data.tableList.total)
    }
  }
  catch(e) {}
  equiLoading.value = false;
}

// 地图穿透点击
const mapClick = (data, type?: string) => {
  if(type == 'map') {
    getTeamData(data)
  }

  let value = type == 'map' ? data : data['NAME']
  getUserData(value, type)
  getEquiData(value, type)
}

// 查看详情
const showDetial = (type: string) => {
  checkType.value = type;
  showEdit.value = true
}
</script>

<style lang='scss'>
.u-emergency-index-tab {
  position: absolute;
  top: 0;
  left: 0;
  background: url('./../../../../../assets/map/bacground_grid.png');
  background-size: cover;
  .ant-tabs-nav {
    &::before {
      border-bottom: none;
    }
    .ant-tabs-ink-bar {
      height: 4px;
      border-radius: 4px 4px 0 0
    }
  }
  .ant-tabs-tab-btn {
    font-size: var(--font-size-level-2);
  }
  .ant-tabs-tab-active {
    font-weight: 600;
  }
}
.u-team-card {
  .ant-tabs-tabpane {
    max-height: 500px;
  }
}
</style>